<template>
  <div class="page flex-col">
    <div class="box_1 flex-col">
      <van-nav-bar
        title="会员中心"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
        class="flex-shrink"
      />
      <div class="section_1 flex-col">
        <div class="block_3 flex-row">
          <div class="image-text_1 flex-row justify-between">
            <img
              class="label_1"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng25fc4f588f7ed752dd1ca7a6e2aaa1bb48b095a55099f92475414a1428fc3637.png"
            />
            <div class="text-group_1 flex-col">
              <span class="text_4">微信用户</span>
              <span class="text_5">暂未开通</span>
            </div>
          </div>
        </div>
      </div>
      <div class="section_2 flex-col">
        <span class="text_6">会员权益</span>
        <div class="list_1 flex-col">
          <div
            class="list-items_1 flex-col"
            v-for="(item, index) in loopData0"
            :key="index"
          >
            <div class="group_1 flex-row justify-between">
              <img
                class="label_2"
                referrerpolicy="no-referrer"
                :src="item.lanhuimage0"
              />
              <span class="text_7" v-html="item.lanhutext0"></span>
            </div>
            <span class="text_8" v-html="item.lanhutext1"></span>
          </div>
        </div>
        <div class="group_2 flex-col">
          <div class="section_3 flex-row justify-between">
            <img
              class="label_3"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPng07c1d131a878e38ae3d099a7d32c2ddc239e307c357b61d44ea337ee5267494a.png"
            />
            <span class="text_9">您的私人助理</span>
          </div>
          <span class="text_10"
            >学习，医疗，法律，旅游，翻译等生活问题都能随时化身专业的助手替您解决</span
          >
        </div>
        <span class="text_11">会员套餐</span>
        <div class="group_3 flex-row">
          <span class="text_12">1天体验</span>
          <span class="text_13">¥</span>
          <span class="text_14">5</span>
          <span class="text_15">¥5/天</span>
          <div class="text-wrapper_2 flex-col">
            <span class="text_16">立即购买</span>
          </div>
        </div>
        <div class="grid_1 flex-row">
          <div
            class="list-items_2 flex-col"
            :style="{ background: item.lanhuBg0 }"
            v-for="(item, index) in loopData1"
            :key="index"
          >
            <span
              v-if="item.slot1 === 1"
              class="text_17"
              v-html="item.specialSlot1.lanhutext0"
            ></span>
            <div
              v-if="item.slot3 === 3"
              class="text-wrapper_3 flex-row justify-between"
            >
              <span
                class="text_18"
                v-html="item.specialSlot3.lanhutext0"
              ></span>
              <span
                class="text_19"
                v-html="item.specialSlot3.lanhutext1"
              ></span>
            </div>
            <span
              v-if="item.slot2 === 2"
              class="text_20"
              v-html="item.specialSlot2.lanhutext0"
            ></span>
            <img
              v-if="item.slot4 === 4"
              class="label_4"
              referrerpolicy="no-referrer"
              src="./assets/img/SketchPngd79b6b49be36c2a332fb48323f377e9d37e071c1e0654da42be5084b4dc1927e.png"
            />
            <div v-if="item.slot5 === 5" class="section_4 flex-col">
              <span
                class="text_21"
                v-html="item.specialSlot5.lanhutext0"
              ></span>
              <div class="text-wrapper_4 flex-row justify-between">
                <span
                  class="text_22"
                  v-html="item.specialSlot5.lanhutext1"
                ></span>
                <span
                  class="text_23"
                  v-html="item.specialSlot5.lanhutext2"
                ></span>
              </div>
              <span
                class="text_24"
                v-html="item.specialSlot5.lanhutext3"
              ></span>
            </div>
            <div class="text-wrapper_5 flex-col">
              <span class="text_25" v-html="item.lanhutext0"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loopData0: [
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngea39c97ffc54cb5e419f86b73d47d6966d0c2ce8d59d217b6afc57c32e52f950",
          lanhutext0: "无限制AI消息回复",
          lanhutext1: "超级聪明的人工智能AI助理，消息秒回，VIP享无限畅聊",
        },
        {
          lanhuimage0:
            "https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng949bf8c7f46a8c1d1352da11354114329594d6fa7671b767470cfc2e157fcffd",
          lanhutext0: "累不死的AI打工人",
          lanhutext1: "查资料，写计划，写报告，想灵感写总结统统搞定",
        },
      ],
      loopData1: [
        {
          lanhuBg0:
            "url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng695d783861c23e4be048e6b30461d34684dbf4e9d087f06d47958e9edc6a658b) 100% no-repeat",
          lanhutext0: "立即购买",
          specialSlot1: { lanhutext0: "1个月" },
          slot1: 1,
          specialSlot3: { lanhutext0: "¥", lanhutext1: "20" },
          slot3: 3,
          specialSlot2: { lanhutext0: "¥0.67/天" },
          slot2: 2,
        },
        {
          lanhuBg0:
            "url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngaab7e43a56ff0ef9ae82e4cedbd6ff4b3365c6e997f38813b19a48770663e94a) 100% no-repeat",
          lanhutext0: "立即购买",
          specialSlot5: {
            lanhutext0: "3个月",
            lanhutext1: "¥",
            lanhutext2: "45",
            lanhutext3: "¥0.67/天",
          },
          slot5: 5,
        },
        {
          lanhuBg0:
            "url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPnga42947d7b9bf20880da9c57f29eb389fdbdae84b645b03e861fc37c1c2384ba8) 100% no-repeat",
          lanhutext0: "立即购买",
          specialSlot1: { lanhutext0: "6个月" },
          slot1: 1,
          specialSlot3: { lanhutext0: "¥", lanhutext1: "80" },
          slot3: 3,
          specialSlot2: { lanhutext0: "¥0.67/天" },
          slot2: 2,
        },
        {
          lanhuBg0:
            "url(https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng3310c27f56fcd0fd44c12436acb9fb1f46ef1bb48158d5941d4b1b1978acdd36) 100% no-repeat",
          lanhutext0: "立即购买",
          specialSlot5: {
            lanhutext0: "1年",
            lanhutext1: "¥",
            lanhutext2: "120",
            lanhutext3: "¥0.67/天",
          },
          slot5: 5,
          slot4: 4,
        },
      ],
      constants: {},
    };
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>
<style scoped lang="less" src="./assets/index.response.less" />
